<template>
  <div class="update-purpose-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>更新简历目的地</span>
        </div>
      </template>
      <div class="card-content">
        <!-- 查询表单组件 -->
        <el-form :model="formData" label-width="120px">
          <el-form-item label="业务ID">
            <el-input v-model="formData.bizId" placeholder="请输入业务ID" clearable></el-input>
          </el-form-item>
          <el-form-item label="产品ID">
            <el-input v-model="formData.productId" placeholder="请输入产品ID" clearable></el-input>
          </el-form-item>
          <el-form-item label="路径">
            <el-input v-model="formData.path" placeholder="请输入路径" clearable></el-input>
          </el-form-item>
          <el-form-item label="语言">
            <el-select v-model="formData.lang" placeholder="请选择语言">
              <el-option :value="1" label="中文"></el-option>
              <el-option :value="2" label="英文"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="首选城市区域">
            <el-input v-model="formData.preferredCityDistrict" placeholder="请输入首选城市区域" clearable></el-input>
          </el-form-item>
          <el-form-item label="首选位置">
            <el-input v-model="formData.preferredLocation" placeholder="请输入首选位置" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit" :loading="loading">提交</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 结果展示 -->
        <transition name="slide-fade">
          <div v-if="result" class="result-container">
            <h3>更新结果</h3>
            <pre>{{ result }}</pre>
          </div>
        </transition>

        <!-- 错误提示 -->
        <el-alert
          v-if="errorMessage"
          :title="errorMessage"
          type="error"
          show-icon
          :closable="true"
          @close="errorMessage = ''"
        ></el-alert>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { updatePurpose, UpdatePurposeParams, UpdatePurposeBody } from '@/api/resumePurpose'

const loading = ref(false)
const result = ref<string>('')
const errorMessage = ref('')

// 表单数据
const formData = reactive({
  bizId: '',
  productId: '',
  lang: 1,
  path: '',
  preferredCityDistrict: '',
  preferredLocation: ''
})

// 提交表单
const handleSubmit = async () => {
  // 表单验证
  if (!formData.bizId || !formData.productId || !formData.path) {
    ElMessage.warning('请填写必要的参数')
    return
  }

  loading.value = true
  errorMessage.value = ''
  result.value = ''

  try {
    // 构建请求参数
    const params: UpdatePurposeParams = {
      bizId: formData.bizId,
      productId: formData.productId,
      lang: formData.lang,
      path: formData.path
    }

    // 构建请求体
    const body: UpdatePurposeBody = {
      preferredCityDistrict: formData.preferredCityDistrict,
      preferredLocation: formData.preferredLocation
    }

    // 发送请求
    const response = await updatePurpose(params, body)
    
    // 处理响应
    if (response.code === 200) {
      ElMessage.success('更新成功')
      result.value = JSON.stringify(response, null, 2)
    } else {
      errorMessage.value = response.message || '更新失败'
    }
  } catch (error: any) {
    console.error('API请求错误:', error)
    errorMessage.value = error.message || '网络错误，请稍后重试'
  } finally {
    loading.value = false
  }
}

// 重置表单
const handleReset = () => {
  formData.bizId = ''
  formData.productId = ''
  formData.path = ''
  formData.preferredCityDistrict = ''
  formData.preferredLocation = ''
  result.value = ''
  errorMessage.value = ''
}
</script>

<style scoped>
.update-purpose-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  padding: 20px;
}

.result-container {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.result-container pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 动画相关样式 */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>